<template>
  <span ref="scrollIntoView"></span>
  <div class="home-box" id="home-box">
    <div class="swiper-box">
      <div class="swiper-box-shadow">
        <div class="shadow-box"></div>
      </div>

      <swiper
        :bannerList="store.styleInfo.wapBanners.length > 0 ? store.styleInfo.wapBanners : store.styleInfo.banners"
      ></swiper>
    </div>

    <div v-for="(item, index) in typeList" :key="item.id" class="hw-unit-box hw-unit-box-selct-i" ref="hwUnitBox">
      <!-- <preface :info="item" v-if="item.type <= 6" :ModuleId="item.type" />
      <exhibit :info="item" :ModuleId="item.type" v-else-if="item.type <= 11 && item.type >= 6" /> -->
      <Subunit :info="item" :ModuleId="item.type" :type="item.number" />
    </div>
  </div>

  <NavVue @top="top" :flag="false"></NavVue>
</template>
<script lang="ts">
import { defineComponent, onActivated } from 'vue';
export default defineComponent({
  name: 'templateHome',
});
</script>
<script setup lang="ts">
// @ts-nocheck

import { watch, ref, onMounted, nextTick } from 'vue';
import { urls } from '@/utils/request/upload';
import Subunit from '../Subunit/index.vue';
import preface from '../preface/index.vue';
import exhibit from '../exhibits/index.vue';
import { useProjectStore } from '@/store';
import { storeToRefs } from 'pinia';
import NavVue from './wapComponents/nav.vue';
import swiper from './wapComponents/swiper.vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

const store = useProjectStore();
const typeList = ref([]);
typeList.value = store.styleInfo.moduleList;
const { styleInfo } = storeToRefs(store);
const current = ref(0);
const scrollIntoView = ref(null);
const hwUnitBox = ref(0);
const swiperWidth = ref(0);
const swiperHeight = ref(0);
const addCruuent = (e: number) => {
  if (e === 2) {
    if (current.value == store.styleInfo.banners.length - 1) {
      current.value = 0;
    } else {
      current.value = current.value + 1;
    }
  } else {
    if (current.value == 0) {
      current.value = store.styleInfo.banners.length - 1;
    } else {
      current.value = current.value - 1;
    }
  }
};
onMounted(() => {
  // for (let index = 0; index < hwUnitBox.value.length; index++) {
  //   if ((index + 1) % 2 === 0) {
  //     if (store.styleInfo.auxiliaryColor === '#fff') {
  //       hwUnitBox.value[index].style.backgroundColor = '#F0E9E1 ';
  //       // hwUnitBox.value[index].style.backgroundColor = store.styleInfo.background;
  //     } else {
  //       hwUnitBox.value[index].style.backgroundColor = store.styleInfo.auxiliaryColor;
  //     }
  //   } else {
  //     console.log(store.styleInfo.auxiliaryColor, store.styleInfo.background);
  //     if (store.styleInfo.auxiliaryColor === '#fff') {
  //       hwUnitBox.value[index].style.backgroundColor = '#FAF9F7';
  //       // hwUnitBox.value[index].style.backgroundColor = store.styleInfo.background;
  //     } else {
  //       hwUnitBox.value[index].style.backgroundColor = store.styleInfo.background;
  //     }
  //   }
  // }
  // var dom = document.getElementById('home-box');
  // dom.addEventListener('scroll', () => {
  //   console.log('999');
  // });
});
watch(
  () => styleInfo,
  () => {
    typeList.value = store.styleInfo.moduleList;
  },
  { deep: true },
);
watch(
  () => route,
  () => {
    if (route.meta.title == '模板首页') {
      pathChilds();
    }
  },
  { deep: true },
);

const top = () => {
  scrollIntoView.value.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
window.addEventListener('resize', () => {
  swiperWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  swiperHeight.value = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  console.log('屏幕宽度：' + swiperWidth.value);
  console.log('屏幕高度：' + swiperHeight.value);
});
onActivated(() => {
  console.log('激活');
});
// if (store.homeCurrent !== -1) {
// }
const getListElements = () => {
  return document.querySelectorAll('.hw-unit-box-selct-i');
};
const pathChilds = (e: number, item: any, index: number, isChild: Boolean) => {
  nextTick(() => {
    if (store.homeCurrent === -1) {
      return;
    }
    const elements = getListElements();
    const element = elements[store.homeCurrent];
    if (element) {
      // 滚动选项
      const options = {
        behavior: 'smooth',
        block: 'start',
      };

      // 高亮效果

      // nextTick(() => {
      // 滚动到元素
      element.scrollIntoView(options);

      // });
    }
  });
};
</script>

<style lang="less" scoped>
.shadow-box {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}
.dot-item {
  width: 20px;
  height: 20px;
}

.dot-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.tdesign-demo-block--swiper {
  width: 100%;
  height: 100vh;
}
.demo-item {
  width: 100%;
  height: 100vh;

  img {
    width: 100%;
    height: 100vh;
  }
}
.hw-unit-box {
  position: relative;
  z-index: 8;
  width: 100%;
  // min-width: 100%;
  margin: 0 auto;
}
.quanjuIcon {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(calc(-50% + 634px), 0);
  > div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 20px;
    position: relative;

    margin-bottom: 20px;
    /deep/.iconfonts {
      font-size: 26px !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .t-icon {
      font-size: 30px !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
/deep/.star-box-pablish {
  right: 0 !important;
  top: 0 !important;
}
.home-box {
  // height: calc(100vh - 28px);
  // overflow: auto;
}
</style>
